<template>
  <view>
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-浅学音标'"> </Breadcrumb>
        <RouterTabs :list="routerList" :current="1"> </RouterTabs>
        <view class="content">
          <view class="box">
            <u-collapse ref="collapse" @change="change" :accordion="false">
              <u-collapse-item :open="true">
                <view class="section">
                  <view class="section_img">
                    <image :src="phoneticDetail.img" mode="widthFix"></image>
                    <view class="section_icon" @click="play()">
                      <image
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/horn.png"
                        mode="widthFix"
                      ></image>
                    </view>
                  </view>
                </view>
                <template slot="title">
                  <view class="title">
                    <text>发音器官示意图</text>
                  </view>
                </template>
              </u-collapse-item>
              <u-collapse-item>
                <view class="section">
                  <view class="section_text" v-html="phoneticDetail.method">
                  </view>
                </view>
                <template slot="title">
                  <view class="title">
                    <text>发音方法</text>
                  </view>
                </template>
              </u-collapse-item>
              <u-collapse-item>
                <view class="section">
                  <view class="section_text" v-html="phoneticDetail.secret">
                  </view>
                </view>
                <template slot="title">
                  <view class="title">
                    <text>发音秘诀</text>
                  </view>
                </template>
              </u-collapse-item>
              <u-collapse-item>
                <view class="word">
                  <view
                    class="word_box"
                    v-for="(item, index) in phoneticDetail.words"
                    :key="index"
                    @click.stop="playExample(item)"
                  >
                    <u-icon name="volume-up" color="#81B7FF" size="40"></u-icon>
                    <view class="word_text">
                      <view class="word_englsih">
                        <text>{{ item.wordNormalPart }}</text>
                        <text class="active">{{ item.wordKeyPart }}</text>
                        <text>{{ item.wordNormalSuffix }}</text>
                      </view>
                      <text class="word_chinese">{{
                        item.wordParaphrase
                      }}</text>
                    </view>
                  </view>
                </view>
                <template slot="title">
                  <view class="title">
                    <text>发音单词</text>
                  </view>
                </template>
              </u-collapse-item>
            </u-collapse>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPhoneticDetail } from "@/api/spelling";
const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  components: {},
  data() {
    return {
      routerList: [
        {
          name: "练习字母",
          url: "pages/spelling/letter",
        },
        {
          name: "浅学音标",
          url: "pages/spelling/soundmarkShallow",
        },
        {
          name: "拼读训练",
          url: "pages/spelling/spellingTraining",
        },
        {
          name: "团灭音标",
          url: "pages/spelling/soundmarkAce",
        },
        {
          name: "暴击词汇",
          url: "pages/spelling/vocabulary",
        },
      ],
      id: "",
      phoneticDetail: {},
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.init();
  },
  methods: {
    init() {
      let params = {
        id: this.id,
      };
      getPhoneticDetail(params).then((res) => {
        this.phoneticDetail = res.data;
        this.play();
      });
    },
    play() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.phoneticDetail.audio;
      englishAudioContext.play();
    },
    playExample(item) {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = item.wordAudio;
      englishAudioContext.play();
    },
    change() {
      this.$refs.collapse.init();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./soundmarkShallowDetail";
</style>
